<template>
  <page-wrap back title="职途报告" hideTab stayStill :hideSafeArea="true">
    <viwe class="resume" :class="{end: animationStatus == 2}">
      <view class="header">
        <image :src="titleImg" mode="" class="img"></image>
      </view>
      <view class="option">
        <!-- <view class="option-item" @click="showAwards = true">奖项</view>
        <view class="option-item" @click="showRules = true">活动规则</view> -->
        <view class="option-item" @click="connect">联系小二</view>
      </view>
      <view class="window">
        <image :src="glassImg" class="glass"></image>
        <image v-show="animationStatus == 0" :src="resumeImg" class="resume-card" mode="widthFix"></image>
      </view>
      <view class="status" v-if="showStatusText">
        <view class="status-text">{{statusText}}</view>
        <image v-show="animationStatus == 0" :src="ticketImg" class="ticket"></image>
      </view>
      <view class="operate">
        <image :src="clockImg" class="clock"></image>
        <view class="send-wrapper">
          <image :src="sendImg" class="send" @click="send"></image>
        </view>
      </view>
      <view class="tips">
        活动最终解释权归深圳市一览网络股份有限公司所有
      </view>

      <view class="sprite" :class="{on: animationStatus == 1}"></view>
    </viwe>

    <u-popup v-model="showAwards" mode="bottom" closeable>
			<view class="popup awards">
        <view class="title">活动奖项</view>
        <view class="ranking">
          <view class="ranking-title">一等奖1名</view>
          <view class="ranking-content">
             300元奖金、充电宝1个
          </view>
        </view>
        <view class="ranking">
          <view class="ranking-title">二等奖2名</view>
          <view class="ranking-content">
            每人奖励200元奖金、充电宝1个
          </view>
        </view>
        <view class="ranking">
          <view class="ranking-title">三等奖3名</view>
          <view class="ranking-content">
           每人奖励300元奖金、充电宝1个
          </view>
        </view>
        <view class="ranking">
          <view class="ranking-title">参与奖50名</view>
          <view class="ranking-content">
            每人奖励简历诊断一份
          </view>
        </view>
        <view class="btn btn-success" @click="showAwards = false">
          确定
        </view>
      </view>
		</u-popup>

    <u-popup v-model="showRules" mode="bottom" closeable>
			<view class="popup rules">
        <view class="title">职途报告</view>
        <div class="slide">
          <scroll-view scroll-y class="rule-wrapper" @scroll="handleScroll">
            <view class="rule u-m-t-26">
              <view class="rule-title">一、活动时间</view>
              <view>即日起~2023.04.10</view>
            </view>
            <view class="rule">
              <view class="rule-title">二、活动对象</view>
              <view>在校学生</view>
            </view>
            <view class="rule">
              <view class="rule-title">三、活动内容</view>
              <view>本活动为一览·校园举办的2023年应届生春招简历大赛。应届生用户在简历工坊中完成登录后，点击简历传送可选择简历文件上传，成功上传简历文件即视为参赛。本次活动设有一等奖、二等奖、三等奖以及参与奖，奖品详情请点击奖项查看。</view>

            </view>
            <view class="rule">
              <view class="rule-title">四、参赛作品要求</view>
              <view>
                1.参赛者作品为原创，自行设计制作，如发现或接到举报证明参赛作品为抄袭，则取消参评资格；
              </view>
              <view>2.参赛者可以自定所选定的公司职位，按照简历的标准格式设计；</view>
              <view>3.作品主题明确，设计合理，重点突出自己的特色和优势，总体美观大方，保证其创新性、完整性、可观赏性；</view>
              <view>4.参赛作品纸张要求为A4纸，一页为宜，保存格式为PDF。</view>
            </view>
            <view class="rule">
              <view class="rule-title">五、获奖名单公布</view>
              <view>获奖名单将于4月15日号公布，参赛者可关注一览校园公众号了解最新信息。</view>
            </view>
            <view class="rule">
              <view class="rule-title">六、奖品发放</view>
              <view>如若您的参赛投稿入选，简历诊断服务将在两周内通过活动参赛入口发放，其他奖励将陆续在名单公布后一个月内发放，请关注一览校园公众号留意后续信息。</view>
            </view>
            <view class="rule u-p-b-68">
              <view class="rule-title">声明</view>
              一览校园深知个人隐私信息对您的重要性，所以我们在此承诺保护所有参赛用户个人信息及隐私的安全。此次大赛收集到的信息不会作任何商业用途。
            </view>
          </scroll-view>
          <view class="slide-bar" :style="{top: top}"></view>
        </div>

        <image :src="schoolQr" class="qr"></image>
        <view class="u-text-center qr-tips">（更多疑问请扫码咨询）</view>

        <view class="btn btn-send" @click="handleSend">
          简历传送
        </view>
      </view>
		</u-popup>

    <u-popup v-model="showSuccess" mode="bottom" closeable>
			<view class="popup success">
        <view class="title">报名成功</view>
        <view class="content">
          您已 <text class="text-red">成功报名</text> 参赛！坊小二收到您的简历了，参赛！坊小二收到您的简历了，之后我们会对您的简历进行评审，比赛获奖结果将会在4月15日公布，您可以关注一览校园公众号获取活动最新动态和具体规则。如果您有其他问题，也可以咨询小二，我们接收到后会尽快回复您～
        </view>
        <image :src="successImg" class="img"></image>
        <view class="operate">
          <view class="btn btn-next" @click="showSuccess = false">下次咨询</view>
          <view class="btn btn-connect" @click="handleConnect">现在问问</view>
        </view>
      </view>
		</u-popup>

    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import personDetailMixin from "../../company/mixins/personDetail.js";
import IMEventHandler from "@/utils/im";
import {
  uploadAction,
} from "@/api/index";
import ShareMixin from '@/mixins/share';
import LoginDialog from "@/components/LoginDialog";
export default {
  components:{
    LoginDialog,
  },
  mixins: [personDetailMixin, ShareMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
      titleImg: this.$imgBaseSelf + "career/workshop-title.png",
      glassImg: this.$imgBaseSelf + "career/workshop-glass.png",
      resumeImg: this.$imgBaseSelf + "career/tips.png",
      ticketImg: this.$imgBaseSelf + "career/workshop-ticket.png",
      clockImg: this.$imgBaseSelf + "career/workshop-clock.png",
      sendOffImg: this.$imgBaseSelf + "career/resume-send-on.png",
      sendOnImg: this.$imgBaseSelf + "career/resume-send-off.png",
      sendImg: '',
      chatId: "24223415_cm1659576030119", // 坊小二id："24223415_cm1659576030119"
      zpId: "53522147", // 简历工坊职位id："53522147",
      selfInfo: getApp().globalData.imInfo,
      showAwards: false,
      showRules: false,
      animationStatus: 0, // 0:初始，1:动画中，2：动画结束
      statusText: '待解析',
      schoolQr: this.$imgBaseSelf + 'career/qr-school-1.png',
      showSuccess: false,
      successImg: this.$imgBaseSelf + 'career/success.png',
      top: '20rpx',
      shareTitle: this.$selfName + " - 职途报告",
      sharePath: '/pagesSub/career/activity/resume',
      showStatusText: false,
    };
  },

  onLoad() {
    this.imLogin();
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName + " - 简历工坊",
  //     path: `/pagesSub/career/activity/resume`,
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName + " - 简历工坊",
  //     path: `/pagesSub/career/activity/resume`,
  //   };
  // },
  created() {
    this.$bus.$on("LOGIN_SUCCESS", () => {
      this.selfInfo = getApp().globalData.imInfo;
    });
    this.sendImg = this.sendOffImg;
    
    setTimeout(() => {
      this.showStatusText = true;
    }, 500)
  },
  mounted() {
    this.getPersonDetail(); // from personMixin
  },
  beforeDestroy() {
    this.$bus.$off("LOGIN_SUCCESS");
  },
  methods: {
    handleSend() {
      this.showRules = false;
      this.send();
    },
    send() {
      this.sendImg = this.sendOnImg; 
      setTimeout(() => {
        this.sendImg = this.sendOffImg;
      }, 300);

      if(this.animationStatus == 1) {
        return
      }

      if (this.checkLogin()) {
        if (!this.userInfo.id) {
          uni.showToast({
            title: "未获取到用户信息，请稍后再试",
            icon: "none",
          });
          return;
        }
        // if (this.userInfo.rctypeId == 1) {
        //   uni.showToast({
        //     title: "该活动目前仅对应届生开放",
        //     icon: "none",
        //   });
        // } else {
        //   this.handleSendFile();
        // }

        this.handleSendFile();
      }
    },
    handleConnect() {
      this.showSuccess = false;
      this.connect();
    },
    connect() {
      if (this.checkLogin()) {
        this.handleChat();
      }
    },
    checkLogin() {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return false;
      }
      return true;
    },
    loginSuccessBack(){
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      this.imLogin();
      this.getPersonDetail();
      this.selfInfo = getApp().globalData.imInfo;
    },
    imLogin() {
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        new IMEventHandler();
      }
    },
    handleChat() {
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: "正在连接",
          mask: true,
        });
        let isFirst = true;
        new IMEventHandler(() => {
          if (isFirst) {
            isFirst = false;
            uni.hideLoading();
            uni.navigateTo({
              url:
                "/pagesSub/message/chat/index??isAutoSendMsg=0chatId=" +
                this.chatId +
                "&zpId=" +
                this.zpId,
            });
          }
        });
      } else {
        uni.navigateTo({
          url:
            "/pagesSub/message/chat/index?isAutoSendMsg=0&chatId=" +
            this.chatId +
            "&zpId=" +
            this.zpId,
        });
      }
    },

    //创建消息体并发送
    creatMsgContent(content) {
      const that = this;
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        new IMEventHandler(() => {
          uni.hideLoading();
          that.creatMsgContent(content);
        });
        return uni.showLoading({
          title: "正在连接",
          mask: true,
        });
      }
      if (!content) {
        return uni.showToast({
          icon: "none",
          title: "发送内容不能为空",
        });
      }

      content = JSON.stringify(content);
      let _self = this;
      getApp()
        .globalData.tim.sendSingleMsg({
          target_username: this.chatId,
          content: content,
          no_offline: false,
          no_notification: false,
          custom_notification: {
            enabled: true,
            title: this.selfInfo.nickname,
            alert: JSON.parse(content).content,
          },
          need_receipt: true,
        })
        .onSuccess(function (data, msg) {
          _self.handleSendMsgSuccess(data, msg);
        })
        .onFail((data) => {
          console.log(data);
          switch (data.code) {
            case 880207:
              uni.showToast({
                title: "发送消息失败，已被对方拉入黑名单!",
                icon: "none",
                duration: 2000
              });
              break;
            default:
              uni.showToast({
                icon: "none",
                title: "消息发送失败",
                duration: 2000
              });
              break;
          }
        });
    },
    // 成功发送消息处理
    handleSendMsgSuccess(data, msg) {

      msg.ctime_ms = data.ctime_ms;
      let msgList = getApp().globalData.messageList.filter(
        (ele) => ele.from_username == this.chatId
      );
      if (!msgList.length) {
        let msgItem = {
          from_username: msg.target_name,
          msgs: [msg],
        };
        getApp().globalData.messageList.push(msgItem);
      } else {
        msgList[0].msgs.push(msg);
      }
      
      this.animationStatus = 1;
      this.statusText = '解析中';
      setTimeout(() => {
        this.statusText = '已解析';
        this.showSuccess = true;
        setTimeout(()=> {
          this.animationStatus = 2;
        }, 500);
      }, 3000);  
    },
    handleSendFile() {
      // #ifdef MP-WEIXIN
      let opt = {
        count: 1,
        type: "file",
        extension: ['doc', 'docx', 'xlsx', 'pptx', 'pdf'],
        success: (res) => {
          const tempFilePath = res.tempFiles[0].path;
          const fileName = res.tempFiles[0].name;
          console.log(res);
          uni.uploadFile({
            url: uploadAction,
            filePath: tempFilePath,
            name: "file",
            success: (fileRes) => {
              console.log(fileRes);
              if (fileRes.data) {
                let filePath = "https://img106.job1001.com/" + fileRes.data;
                this.sendFile(filePath, fileName);
              }
            },
            fail: (err) => {
              uni.showToast({
                icon: "none",
                title: "文件发送失败",
                duration: 2000
              });
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: "文件选择失败",
            icon: "none",
          });
        },
      };
      wx.chooseMessageFile(opt);
      // #endif
    },

    sendFile(filePath, fileName) {
      let content = {
        send_uid: this.selfInfo.uname,
        receive_uid: this.chatId,
        content: "文件",
        share: {
          type: 100,
          slave: {
            name: fileName,
            path: filePath,
          },
        },
        person_iname: this.selfInfo.nickname,
        person_pic: this.selfInfo.pic,
        is_send: "1",
        idate: new Date().getTime(),
      };
      this.creatMsgContent(content);
    },

    handleScroll(e) {
      this.top = e.detail.scrollTop/e.detail.scrollHeight * 760 + 20 + 'rpx';
    }
  },
};
</script>

<style lang="scss" scoped>
.resume {
  position: relative;
  height: 1571rpx;
  background-image: url($img-base + "career/workshop-bg.png");
  background-size: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &.end {
    background-image: url($img-base + 'career/40/40_00039.png'), url($img-base + "career/workshop-bg.png");
  }
  background-size: 100%, 100%;
  .sprite {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-image: url($img-base + 'career/40.png');
    background-size: auto 1571rpx;
    pointer-events: none;
    &.on {
      z-index: 2;
      animation: frame 3000ms steps(39) both 1;
      animation-fill-mode: forwards;
    }
  }
  @keyframes frame {
    0% {background-position: 0rpx 0rpx;}//可省略
    100% {background-position: -29250rpx 0rpx;}
  }

  .header {
    .img {
      margin-left: 58rpx;
      margin-top: 40rpx;
      width: 559rpx;
      height: 234rpx;
    }
  }
  .option {
    position: absolute;
    right: 35rpx;
    top: 58rpx;
    font-size: 24rpx;
    color: #ffffff;
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24rpx;
      width: 86rpx;
      height: 86rpx;
      padding: 0 10rpx;
      text-align: center;
      background: rgba(0, 0, 0, 0.38);
      border: 2rpx solid #86dc16;
      border-radius: 50%;
    }
  }

  .window {
    position: relative;
    margin-top: 260rpx;
    margin-left: 96rpx;
    width: 563rpx;
    height: 358rpx;

    .glass {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 563rpx;
      height: 358rpx;
    }
    .resume-card {
      position: absolute;
      top: 149rpx;
      left: 66rpx;
      z-index: 1;
      width: 437rpx;
    }
  }

  .status {
    position: relative;
    height: 320rpx;
    &-text {
      position: absolute;
      left: 100rpx;
      top: 48rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #86dc16;
      background-color: #000;
    }
    .ticket {
      position: absolute;
      right: 85rpx;
      top: 96rpx;
      width: 316rpx;
      height: 39rpx;
    }
  }

  .operate {
    display: flex;
    align-items: center;
    padding-left: 82rpx;
    margin-top: 74rpx;
    margin-bottom: 48rpx;
    .clock {
      margin-right: 35rpx;
      width: 192rpx;
      height: 192rpx;
    }
    .send-wrapper {
      background-image: url($img-base + '/career/workshop-send-off.png');
      background-size: 100% 100%;
    }
    .send {
      width: 371rpx;
      height: 171rpx;
    }
  }

  .tips {
    text-align: center;
    font-size: 24rpx;
    color: #FFF;
  }
}

.popup {
  padding: 32rpx;
  margin-bottom: 56rpx;
  font-size: 28rpx;
  color: #5D8B29;
  background: linear-gradient(180deg, #F3FFE8 0%, #FFFFFF 100%);
  .title {
    margin-bottom: 45rpx;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    color: #000000;
  }
  &.awards, &.rules {
    .btn {
      width: 100%;
      border-radius: 44rpx;
      color: #FFFFFF;
      background: linear-gradient(306deg, #67D300 0%, #BAD638 100%);
    }
  }

}
.awards {
  .ranking {
    margin-bottom: 56rpx;
    font-size: 28rpx;
    color: #5D8B29;
    &-title {
      margin-bottom: 24rpx;
      font-size: 36rpx;
      font-weight: bold;
    }
  }


}
.rule-wrapper {
  box-sizing: border-box;
  margin: 0 auto 24rpx;
  width: 686rpx;
  height: 760rpx;
  padding: 0 26rpx;
  overflow-y: scroll;
  background-color: #FFF;
  border: 2rpx solid #6AB413;
  border-radius: 16rpx;
}
.slide {
  position: relative;
}
.rules {
  .rule {
    margin-bottom: 56rpx;
    font-size: 30rpx;
    line-height: 48rpx;
    &-title {
      margin-bottom: 20rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

  }
  .slide-bar {
    position: absolute;
    top: 0;
    right: -6rpx;
    width: 6rpx;
    height: 207rpx;
    background: #6AB413;
    border-radius: 6rpx;
  }
  .qr {
    width: 313rpx;
    height: 316rpx;
    margin: 0 auto;
  }

  .qr-tips {
    margin-bottom: 40rpx;
  }
}

.success {
  .content {
    margin-bottom: 70rpx;
  }
  .text-red {
    color: #D72828;
  }
  .img {
    width: 416rpx;
    height: 224rpx;
    margin: 0 auto;
    margin-bottom: 66rpx;
  }
  .btn {
    margin-bottom: 40rpx;
    border-radius: 44rpx;
  }
  .btn-next {
    width: 178rpx;
    margin-right: 28rpx;
    color: #69C006;
    border: 2rpx solid #8DDA36;
  }
  .btn-connect {
    width: 478rpx;
    margin-bottom: 40rpx;
    border-radius: 44rpx;
    color: #FFFFFF;
    background: linear-gradient(306deg, #67D300 0%, #BAD638 100%);
  }
}
</style>